<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        
        $(function () {

            function func1() {

                // jquery中的addClass - removeClass - toggleClass
                $("#btn1").click(function () {
                    $("#box1").addClass("box")
                })

                $("#btn2").click(function () {
                    // $("#box1").toggleClass("box")
                    $("#box1").removeClass("box")
                })
            }

            // jquery的index函数，返回该节点的index索引值
            function func2() {
                $("#ul1 li").click(function () {
                    console.log($(this).index());
                })
            }

            // Tab栏的切换

            function func3() {
                $(".tab li").mouseover(function () {
                    $(this).addClass('active').siblings().removeClass("active");

                    // if (condition) {
                    // 使用eq来确定划过的标题和内容显示的div的索引一致，不需要if判断
                    // }
                    $(".con div").eq($(this).index()).addClass("current")
                    $(".con div").eq($(this).index()).siblings().removeClass("current")
                })
            }

            func3()
        })

    </script>

    <style>
    
        .box{
            width: 200px;
            height: 200px;
            background: pink;
        }

        ul,li{ padding: 0; margin: 0; list-style: none; }

        div.tab{
            width: 500px;
            height: 300px;
            margin: 50px auto;
        }

        div.tab ul{
            /* height: 50px; 子元素都浮动,要么设置父类的高度，防止塌陷,要么overflow:hidden,将浮动不占用空间变为占用空间*/
            overflow: hidden;
        }

        div.tab li {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background: #cccccc;
            float: left;
            margin-right: 5px;
        }

        .con {
            height: 250px;
            background: pink;
        }

        .con div{
            height: 250px;
            display: none;
        }

        /* 如果不加.con的话，那么久不会显示current中的文字,因为上面设置div为none覆盖掉了这里的block */
        /* 原因是.con div的权重大于单单的.current */
        .con .current {
            display: block;
        }

        .active {
            background: pink;
            color: red; 
        }

    </style>

</head>
<body>

    <button id="btn1">给div添加类名变色</button>
    <button id="btn2">给div移除类名变色</button>
    <div id="box1"></div>

    <ul id="ul1">
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>

    <div class="tab">

        <!-- 第一行标题 -->
        <ul>
            <li class="active">公告</li>
            <li>论坛</li>
            <li>规则</li>
        </ul>

        <!-- 第二行，标题的内容 -->
        <div class="con">
            <div class="current">公告内容</div>
            <div>论坛内容</div>
            <div>规则内容</div>

        </div>

    </div>

</body>
</html>